<template>
    <div class="container">
        <a-tabs class="setting-tab">
            <a-tab-pane key="list" tab="公告列表">
                <a-button type="primary" style="margin-bottom: 16px" @click="publicNotice">发布公告</a-button>
                <!-- 表格 -->
                <a-table :columns="columns" :dataSource="list" :pagination="{
                    current: page.currentPage,
                    pageSize: page.pageSize,
                    total: page.total,
                    onChange: changePage
                }">
                    <template #bodyCell="{ column, record }">
                        <a-space v-if="column.dataIndex === 'createdAt'">
                            {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'category'">
                            {{ TYPES[record.category] }}
                        </a-space>
                        <a-space v-if="column.dataIndex === 'operate'">
                            <a-button type="primary" @click="editRow(record.id)">编辑</a-button>
                            <a-button type="danger" @click="delRow(record.id)">删除</a-button>
                        </a-space>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
    </div>
    <FormData v-model:showDialog="showDialog" :title="formTitle" :id="noticeId"
        @addSuccess="getList({ currentPage: page.currentPage, pageSize: page.pageSize })" />
</template>

<script setup lang='ts'>
import dayjs from 'dayjs'
import type { IPage } from '@/types/table'
import { message } from 'ant-design-vue'
import type { Notice } from '@/types/notice'
import FormData from './components/Form.vue'
const columns = [
    {
        title: '序号',
        customRender(obj: any) {
            // 要和当前的分页数据进行集合
            // 1 -> 1
            // 2 -> (页码 -1） * 每页条数 + 1
            return (page.currentPage - 1) * page.pageSize + obj.index + 1
        }
    },
    { title: '公告内容', dataIndex: 'content' },
    { title: '类别', dataIndex: 'category' },
    { title: '发布时间', dataIndex: 'createdAt' },
    { title: '操作', dataIndex: 'operate' }
]

type ICategoryType = {
    [key: number]: string
}

// 0考研专区 1就业专区 2校园活动 3跑腿专区
const TYPES: ICategoryType = {
    0: '考研专区',
    1: '就业专区',
    2: '校园活动',
    3: '跑腿专区'
}

const list = ref<Notice[]>([])

const page = reactive<IPage>({
    currentPage: 1,
    pageSize: 5,
    total: 0
})

const showDialog = ref(false)

/** 获取报修申请列表 */
const getList = async (data: IPage) => {
    const close = message.loading('数据正在加载中...')
    const res = await getNoticesList(data)
    list.value = res.data.notice
    page.total = res.data.total
    close()
}
onMounted(() => {
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
})

const changePage = (c: number, p: number) => {
    page.currentPage = c,
        page.pageSize = p
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}

const formTitle = ref('')
const noticeId = ref(999)
const publicNotice = () => {
    showDialog.value = true
    formTitle.value = '发布公告'
}

const editRow = (id: number) => {
    showDialog.value = true
    formTitle.value = '编辑公告'
    noticeId.value = id
}

const delRow = async (id: number) => {
    const res = await delNotices(id)
    res.code === 201 ? message.success('删除成功') : message.error('删除失败')
    getList({ currentPage: page.currentPage, pageSize: page.pageSize })
}


</script>

<style lang="less" scoped>
.container {
    padding: 16px;

    .setting-tab {
        background-color: #fff;
        padding: 16px;
        height: 100%;

        .pagination {
            margin-top: 20px;
        }
    }

    .btnTag:hover {
        cursor: pointer;
    }
}
</style>